import { useRequest } from 'ahooks'
import { useState } from 'react'
import { useEffect } from 'react'
import { Http } from '../../Api'
import { Button } from 'antd'

export const ImageList = ({ data, CurrentData }) => {
    const { get, del, columns, params } = CurrentData
    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => setImageData(res.list),
    })

    const { runAsync: delData } = useRequest(Http, { manual: true })

    const [ImageData, setImageData] = useState()

    useEffect(() => {
        getData({ url: get, data: params })
    }, [get, getData, params])

    const DelImage = (item, index) => {
        delData({ url: del, path: [item.uuid] }).then(() => {
            setImageData(e => {
                e.splice(index, 1)
                return [...e]
            })
        })
    }

    return (
        <div className="ThrDiyBoxImageList">
            {ImageData &&
                ImageData.map((item, index) => (
                    <div key={index}>
                        <div>
                            {item.uuid}
                            <div>
                                <div>影像名称 :</div>
                                <div> {data.tableName}</div>
                            </div>
                            <div>
                                <div>监控名称 :</div>
                                <div> {data.cameraName}</div>
                            </div>
                            <div>
                                <div>上传时间 :</div>
                                <div> {item.createTime}</div>
                            </div>
                            <div>
                                <div>操作 :</div>
                                <Button type="link" danger onClick={() => DelImage(item, index)}>
                                    删除
                                </Button>
                            </div>
                        </div>
                        <img loading="lazy" src={item.fileUrl} alt="" />
                    </div>
                ))}
        </div>
    )
}
